<template>
  <div class="address-content">
    <div class="address-box flex jc-sa">
      <div class="list-box flex ai-c" v-for="(item,index) in addressData" :key="index" :class="{'active':index == selIndex }">
        <div class="flex flex-d jc-c flex-1">
          <!-- <span v-if="item.defaultStatus == 1">默认</span> -->
          <div class="flex jc-sb">
            <div class="name">{{item.name}}</div>
            <div class="phone">{{item.phoneNumber}}</div>
          </div>
          <div class="address">{{item.province}}{{item.city}}{{item.region}}</div>
        </div>
        <div class="absss">
            <i class="el-icon-edit" @click.stop="edit(item)"></i>
            <i class="el-icon-delete" @click.stop="deleteAddress(item)" style="height:20px"></i>
        </div>
      </div>
      <div class="list-box flex jc-c ai-c" @click="add()">
        <i class="add el-icon-plus"></i>
      </div>
    </div>
    <!-- 编辑 -->
    <el-dialog title="修改地址" :visible.sync="dialogVisible" width="40%">
      <div class="exit-content">
        <el-form ref="form" :model="exitForm" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="exitForm.name"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="exitForm.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <v-distpicker @selected="onSelected"></v-distpicker>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input v-model="exitForm.detailAddress"></el-input>
          </el-form-item>
          <el-form-item label="邮政编码">
            <el-input v-model="exitForm.postCode"></el-input>
          </el-form-item>
          <el-form-item label="是否默认" style="margin-left:a">
            <el-radio :label="1" v-model="exitForm.defaultStatus">是</el-radio>
            <el-radio :label="0" v-model="exitForm.defaultStatus">否</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update(exitForm)" v-if="status==false">修改</el-button>
            <el-button type="primary" @click="save(exitForm)" v-if="status==true">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
  data() {
    return {
      selIndex: 1,
      addressData:{},
      dialogVisible:false,
      showVisible:false,
      status:Boolean,
      exitForm: {
        id:"",
        name: "",
        phoneNumber: "",
        memberId:"",
        defaultStatus:0,
        postCode:"",
        province:"",
        city:"",
        region:"",
        detailAddress:"",
      }
    }
  },
  created() {
      this.addressList();
  },
  methods: {
    addressList(){
      let _this = this;
      console.log(this.addressData)
      this.$http.get("/member/address/list").then(function (response) {
          _this.addressData = response.data;
      });
    },
    onSelected(data) {
      console.log("城市三级联动:"+data.province.value,data.city.value,data.area.value);
      this.exitForm.province = data.province.value
      this.exitForm.city = data.city.value
      this.exitForm.region = data.area.value
    },
    onChangeProvince(a){
        console.log(a) 
        this.txt1 = a.value + '-'
      },    
    selAddressClick(index) {
      this.selIndex = index;
    },
    edit(exitForm) {
       this.dialogVisible = true;
       this.exitForm = exitForm;
       this.status = false;
       
    },
    deleteAddress(exitForm){
      let _this = this;
       _this.$confirm('是否要进行此操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           _this.$http.post("/member/address/delete/"+exitForm.id).then(function (response) {
              _this.$message({
              type: 'success',
              message: '操作成功!',
              duration:1000
            });
          _this.$router.back();
          console.log(response);
      });
        });
    },
    save(exitForm) {
      console.log("保存:"+exitForm)
      let _this = this;
      _this.$http.post('/member/address/add',{
        name:exitForm.name,
        phoneNumber:exitForm.phoneNumber,
        defaultStatus:exitForm.defaultStatus,
        postCode:exitForm.postCode,
        province:exitForm.province,
        city:exitForm.city,
        region:exitForm.region,
        detailAddress:exitForm.detailAddress,
      }).then(function (response) {
        _this.$message({
          type: 'success',
          message: response.message,
          duration:1000
        });
        console.log(response);
        _this.dialogVisible = false;
        // location.reload();
      })
    },
    update(exitForm){
      console.log("编辑:"+exitForm);
      let _this = this;
      _this.$http.post('/member/address/update/'+exitForm.id,{
        id:exitForm.id,
        name:exitForm.name,
        phoneNumber:exitForm.phoneNumber,
        defaultStatus:exitForm.defaultStatus,
        postCode:exitForm.postCode,
        province:exitForm.province,
        city:exitForm.city,
        region:exitForm.region,
        detailAddress:exitForm.detailAddress,
      }).then(function (response) {
        _this.$message({
          type: 'success',
          message: response.message,
          duration:1000
        });
        console.log(response);
        _this.dialogVisible = false;
        // location.reload();
      })
    },
    add() {
      console.log('loging ..')
      let _this = this;
      _this.dialogVisible = true;
      _this.status = true;
      _this.exitForm = {}
    }
  },
}
</script>

<style lang="scss" scoped>
.abddd { display: block;  text-align: right; width: 60px; line-height: 30px; }
.address-box {
  padding: 20px 16px;
  flex-wrap: wrap;
}
.list-box {
  width: 30%;
  height: 86px;
  text-align: left;
  padding: 0 16px;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  box-sizing: border-box;
  margin-bottom: 16px;
  cursor: pointer;

  &.active {
    border-color: #e69090;
  }

  .name {
    font-size: 16px;
  }
  .phone {
    font-size: 14px;
    color: #898989;
  }
  .address {
    font-size: 14px;
  }

  .el-icon-edit {
    font-size: 20px;
    margin-left: 10px;
    color: #6a94f5;
  }

  .add {
    font-size: 30px;
  }

}
</style>